<template>
  <div class="app-container">
    <Header class="header"></Header>
    <main class="main-content">
      <router-view />
    </main>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

export default {
  components: { Header, Footer },

}
</script>

<style>
/* 全局容器：设置最小高度为视口高度，使用 Flex 垂直布局 */
.app-container {
  min-height: 100vh; /* 关键：覆盖整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直排列：头部 -> 内容 -> 底部 */
  margin: 0;
  padding: 0;
}

/* 内容区：自动填充剩余空间，将 Footer 挤到底部 */
.main-content {
  flex: 1; /* 占据父容器剩余高度 */
}

/* 头部样式（如有固定高度，需保留） */
.header {
  height: 170px; /* 假设导航栏高度为 60px */
}
</style>